<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS章节 第四课 的第一个文件</title>
	</head>

	<body>
		<h1 align="center">CSS的应用技巧</h1>
		<hr>
		<ol>
			<li>CSS精灵图</li>
			<li>cursor鼠标样式</li>
			<li>opcity透明度</li>
			<li>CSS命名规范</li>
		</ol>

		<p>演示：</p>
		
		<div class="icon-list">
			<p><i></i>icon1</p>
			<p><i class="icon-2"></i><span class="icon-2"></span>图标2</p>
			<p><i class="icon-3"></i></p>
			<i class="icon-4"></i>
			<i class="icon-5"></i>
		</div>

		<div class="icon-head head-1"></div>
		<div class="icon-head head-2"></div>
		<div class="icon-head head-3"></div>

		<style>
			.icon-list i {
				display: block;
				width: 24px;
				height: 24px;
				margin: 5px;
				background: url('https://img.alicdn.com/tps/TB11A9yNpXXXXanapXXXXXXXXXX-220-898.png') no-repeat;
				cursor: pointer;
				/*visibility: none;*/
				opacity: 0.2;
			}
			.icon-list i.icon-2 {
				background-position: 0 -44px;
			}
			.icon-list i.icon-3 {
				background-position: 0 -86px;
			}
			.icon-list i.icon-4 {
				background-position: 0 -132px;
			}
			.icon-list i.icon-5 {
				background-position: 0 -176px;
			}

			.icon-head {
				width: 80%;
				height: 40px;
				margin: 10px auto;
				background: #fff url('https://img.alicdn.com/tps/TB11A9yNpXXXXanapXXXXXXXXXX-220-898.png') no-repeat;
				background-position: center -520px;
			}
			.icon-head.head-2 {
				background-position: center -640px;
			}
			.icon-head.head-3 {
				background-position: center -800px;
			}

		</style>
	</body>
</html>